<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/*图片脱离文档流--文字包含在图片周边*/
				float: left;
				margin-right: 50px; /* 图片与文字连接处间隙 */
				margin-bottom: 50px; /* 图片与文字连接处间隙 */
				margin-left: 50px; /* 图片与文字连接处间隙 */
			}
			p{
				font-size: 16px; /*页面默认字体尺寸*/
				line-height: 20px; /*浮动文字的话，行高无法设定*/
				word-spacing: 25px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/1.png" alt="皮卡丘" width="250px" height="250px">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, nostrum consectetur a alias sint libero laboriosam tenetur quae molestiae vel quasi. Laudantium nulla reiciendis nostrum officiis eaque, cupiditate similique consequatur. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio, sit consequatur quo veniam veritatis ipsum, perspiciatis, et alias cum sint temporibus totam sapiente voluptates suscipit mollitia delectus nam quam expedita. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit accusamus, ut repudiandae odit aliquid, ratione quis illum itaque eligendi rerum, sed consectetur. Similique voluptas rerum quaerat repellat nobis error rem? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo mollitia accusamus eum blanditiis minus sapiente esse harum ullam perferendis. Perferendis provident ab optio voluptatum itaque a ipsum. Esse, alias fugit?</p>
	</body>
</html>